<template>
	<view class="ranking_list ">
		<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y" @scrolltoupper="upper" @scrolltolower="lower"
		 @scroll="scroll">

			<view class="head">
				<!-- #ifdef~ APP-PLUS -->
				<top-set :backgroundColor="`rgba(255,255,255,${headOpacity})`" ></top-set>
				<tab-top :after="headOpacity>=1?false:true" title="月收入排行" :imgSrc="backImg" :color="titleColor"  fixed="true" :bgColor="`rgba(255,255,255,${headOpacity})`"></tab-top>
				<!-- #endif~ -->
				<image class="ranking_bg" src="/static/bg/ranking-bg.png" mode=""></image>
				<view class="closing_date">截止日期：{{time | timeData}}</view>
				<view class="head_portrait_1">
					<view class="portrait_img">
						<image :src="list[0].head_images || '/static/bg/img.png'" mode=""></image>
					</view>
					<view class="portrait_text">{{list[0].name}}</view>
				</view>
				<view class="head_portrait_2">
					<view class="portrait_img">
						<image  :src="list[1].head_images || '/static/bg/img.png'" mode=""></image>
					</view>
					<view class="portrait_text">{{list[1].name}}</view>
				</view>
				<view class="head_portrait_3">
					<view class="portrait_img">
						<image :src="list[2].head_images || '/static/bg/img.png'" mode=""></image>
					</view>
					<view class="portrait_text">{{list[2].name}}</view>
				</view>
				<view class="income_1">&yen; {{list[1].amount_sum}}</view>
				<view class="income_2">&yen; {{list[0].amount_sum}}</view>
				<view class="income_3">&yen; {{list[2].amount_sum}}</view>
			</view>
			<view class="content" >
				<view class="list">
					<view class="item" v-for="(item, index) in list" v-if="index >= 3" :key = "index">
						<view class="text1">{{index + 1}}</view>
						<view class="text2"><image   :src="item.head_images || '/static/bg/img.png'" mode=""></image></view>
						<view class="text3">{{item.name}}</view>
						<view class="text4">&yen; {{item.amount_sum}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import moment from "moment";
	
	const PROPORTION = 1 / 350; //透明度比例 为 1比350
	export default {

		data() {
			return {
				key: '',
				headOpacity: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				time:0,
				list:[]
			}
		},
		filters: {
			timeData(value) {
				return moment( value*1000 ).format('YYYY-MM-DD');
			}
		},
		methods: {
			upper(e) {
				this.headOpacity = 0;
			},
			lower(e) {
				console.log('页面底部');
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop;
				this.headOpacity = e.detail.scrollTop * PROPORTION;
			},
			goTop(e) {
				// 解决view层不同步的问题
				this.scrollTop = this.old.scrollTop;
				this.$nextTick(function() {
					this.scrollTop = 0
				});
				uni.showToast({
					icon: "none",
					title: "纵向滚动 scrollTop 值已被修改为 0"
				})
			},
			/**
			 * 初始化
			 */
			async initialization(){
				let res = await this.getData();
				this.time = res.data.closing_date;
				this.list = res.data.ranking;
				console.log(res);
			},
			/**
			 * 获取数据
			 */
			getData(){
				return new Promise((res)=>{
					this.req({
						url:'user/orderby',
						method:'get'
					},(data)=>{
						res(data.data);
					});
				});
			},
			imgError(e){
				console.log(e);
			}
		},
		onShow(){
			this.initialization();
		},
		mounted() {

		},
		computed: {
			titleColor(){
				if(this.headOpacity<0.5){
					return '#FFFFFF';
				}else{
					return '#000000';
				}
				
			},
			backImg(){
				if(this.headOpacity<0.5){
					return '/static/icon/white-back.png';
				}else{
					return '/static/login/back.png';
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.ranking_list {
		.scroll-Y {
			height: 100vh;

			.head {
				position: relative;
				width: 100%;
				height: 806upx;

				.ranking_bg {
					position: absolute;
					left: 0;
					top: 0;
					width: 100%;
					height: 806upx;
				}
				.closing_date{
					position: absolute;
					width: 100%;
					top: 155upx;
					left: 0;
					text-align: center;
					color: #d1edf9;
					font-size: 20upx;
					line-height: 1;
				}
				.head_portrait_1{
					height: 220upx;
					width: 170upx;
					position: absolute;
					top: 235upx;
					left: 0;
					right: 0;
					margin: 0 auto;
					
					.portrait_img{
						height: 170upx;
						border:  solid 6upx #f9e435;
						border-radius: 50%;
						
					}
				}
				.head_portrait_2{
					
					width: 140upx;
					height: 190upx;
					position: absolute;
					top: 324upx;
					left: 87upx;
					.portrait_img{
						height: 140upx;
						border: solid 6upx #cdcdd0;
						border-radius: 50%;
					}
					
				}
				.head_portrait_3{
					width: 140upx;
					height: 190upx;
					position: absolute;
					top: 324upx;
					right: 87upx;
					.portrait_img{
						height: 140upx;
						border: solid 6upx #daac6e;
						border-radius: 50%;
					}
				}
				.portrait_img{
					width: 100%;
					box-sizing: border-box;
					overflow: hidden;
					image{
						float: left;
						width: 100%;
						height: 100%;
					}
				}
				.portrait_text{
					width: 90%;
					line-height: 1;
					font-size: 28upx;
					margin: 0 auto;
					margin-top: 24upx;
					color: #eef6fc;
					text-align: center;
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.income_1,.income_2,.income_3{
					font-size: 30upx;
					color: #eef6fc;
					line-height: 1;
					position: absolute;
				}
				.income_1{
					bottom: 191upx;
					left: 130upx;
				}
				.income_2{
					text-align: center;
					width: 200upx;
					bottom: 278upx;
					left: 0;
					right: 0;
					margin: 0 auto;
				}
				.income_3{
					bottom: 134upx;
					left: 490upx;
				}
				
			}
			.content{
				margin-top: 18upx;
				width: 100%;
				.list{
					 width:  calc(100% - 100upx);
					 margin: 0 auto;
					.item{
						height: 141upx;
						width: 100%;
						// background: red;
						position: relative;
						.text1,.text2,.text3{
							float: left;
							
						}
						.text4{
							float: right;
						}
						.text1{
							margin-top: 50upx;
							line-height: 1;
							font-size: 40upx;
							color: #333333;
							font-weight: 700;
							width: 2em;
							text-align: center;
						}
						.text2{
							margin-top: 28upx;
							margin-left: 30upx;
							width: 70upx;
							height: 70upx;
							border-radius: 50%;
							overflow: hidden;
							image{
								float: left;
								width: 100%;
								height: 100%;
							}
						}
						.text3{
							margin-top: 54upx;
							line-height: 1;
							font-size: 28upx;
							margin-left: 21upx;
							color: #333333;
						}
						.text4{
							margin-top: 60upx;
							line-height: 1;
							font-size: 28upx;
							color: #333333;
						}
					}
					.item:after{
						content: '';
						position: absolute;
						left: 0;
						bottom: 0;
						width: 100%;
						height: 1upx;
						background-color:#e5e5e5;
						transform: scaleY(0.5);
					}
					
				}
			}
			
		}
	}
</style>
